<template>
  <div>
    <!-- 短信验证码 -->
    <van-dialog
      v-model="show"
      title="短信验证码"
      show-cancel-button
      @confirm="confirm"
    >
      <div class="verificationCode-center">
        <p>验证码</p>
        <input type="text" placeholder="6位短信验证码" id="Y1six" v-model="yzm"/>
        <div @click="startTimer" id="Y1gain" v-if="codeShow">获取验证码</div>
        <!-- 倒计时 -->
        <span v-if="!codeShow" class="count">{{ count }}秒后重试</span>
      </div>
      <div class="verificationCode-top">
        <div id="Y1phone">
          验证码发送至手机号<span id="num1">{{ num }}</span>
        </div>
      </div>
    </van-dialog>
    <!-- 别名编辑 -->
    <div id="zzback">
      <div id="zzmodify">
        <p>修改别名</p>
        <input type="text" id="zzinputBox" />
        <div id="zzcancel">
          <div id="zzcancleone" onclick="unhide()">取消</div>
          <div id="zzcanceltwo" onclick="affirm()">确定</div>
        </div>
      </div>
    </div>
    <div class="zzpage">
      <div class="zzhead">
      <img src="../assets/img/箭头.png" alt="" width="20px" height="20px" @click="goback"/>
        <span>银行卡管理</span>
      </div>
      <div class="zzbody1">
        <div class="zzBankcard">
          <div class="zzBankcardtop">
            <img
              src="../assets/img/银行.png"
              alt=""
              width="50px"
              height="50px"
              style="margin-top: 8px"
            />
            <div class="zzBankcardCard">
              <p>中国富发银行</p>
              <p>储蓄卡</p>
              <p id="zzcard1">{{ card }}
                <img
                  src="../assets/img/闭眼睛.png"
                  alt=""
                  width="20px"
                  height="20px"
                  id="eye"
                  @click="eye"
                />
              </p>
              <!-- //需要eye -->
            </div>
            <p class="zzAliasediting">
              别名编辑
              <img
                src="../assets/img/编辑.png"
                alt=""
                width="20px"
                height="20px"
                style="margin-left: 5px"
                onclick="modify()"
                id="zzpen"
              />
            </p>
          </div>
          <div class="zzBankcardpay">
            <p @click="Kuai">快捷支付绑卡</p>
            <p>|</p>
            <p @click="changePassword">支付密码修改</p>
          </div>
        </div>
        <div class="zzaccountManagement">
          <a href=""
            ><img
              src="../assets/img/短信.png"
              alt=""
              width="40px"
              height="40px"
            />
            <p>短信通知</p>
          </a>
          <a href=""
            ><img
              src="../assets/img/删除人员.png"
              alt=""
              width="40px"
              height="40px"
            />
            <p>账号挂失</p>
          </a>
          <a href=""
            ><img
              src="../assets/img/支付方式.png"
              alt=""
              width="40px"
              height="40px"
            />
            <p @click="mimimi">小额免密支付</p>
          </a>
          <a href="">
            <img
              src="../assets/img/密码.png"
              alt=""
              width="40px"
              height="40px"
            />
            <p>密码解锁</p>
          </a>
        </div>

        <div class="zztail">
          <div>
            <img
              src="../assets/img/账户问题 (1).png"
              alt=""
              width="40px"
              height="40px"
            />
            <p style="margin-left: -190px">账户设置</p>
            <img
              src="../assets/img/箭头下.png"
              alt=""
              width="20px"
              height="20px"
            />
          </div>
          <div>
            <img
              src="../assets/img/支付配置.png"
              alt=""
              width="40px"
              height="40px"
            />
            <p style="margin-left: -190px">支付设置</p>
            <img
              src="../assets/img/箭头下.png"
              alt=""
              width="20px"
              height="20px"
            />
          </div>
          <div style="zzborder-bottom: 0">
            <img
              src="../assets/img/超限额交易.png"
              alt=""
              width="40px"
              height="40px"
            />
            <p style="margin-left: -90px">限额管理/账户安全锁</p>
            <img
              src="../assets/img/箭头下.png"
              alt=""
              width="20px"
              height="20px"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import {auth,auth1,card} from "../api/Detailpage"
export default {
  data(){
    return{
      card:this.$route.params.cardNUm,
      show: false,
      codeShow: true,
      count: "",
      // num: this.$route.params.Number,
      num:localStorage.getItem("iphone"),
      yzm:""
    }
  },
  methods:{
    eye(){
      console.log(1111);
      this.show = true;
    },
    // 验证码
    startTimer() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.codeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      let code = {
        mobile: this.mobile,
        sms_type: "login",
      };
      // 接口 验证码发送请求
      auth({ phone: this.num }).then((res) => {});     
    },
    confirm() {
      auth1({code:this.yzm,phone:this.num,type:"2 "}).then((res)=>{
        if(res.code == 200) {
          console.log(2000);
          card({hideCardNum:this.card}).then((res)=>{
            console.log(res);
            this.card = res.data[0].cardNum
          })
        }else{
          Dialog({ title: "温馨提示", message: res.msg });
        }
      }).catch((err)=>{
          console.log(err);
        })
   
    },
    changePassword(){
      this.$router.push({
        name:"Password",
        params:{
          card:this.card,
          phone:this.num
        }
      })
    },
    // 返回上一页
    goback(){
      this.$router.push({
        name:"Management"
      })
    },
    // 小额免密
    mimimi(){
      this.$router.push({
        name:"mianmi"
      })
    },
    // 快捷支付绑卡
    Kuai(){
      this.$router.push({
        name:"CardBinding"
      })
    }
  }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.zzhead {
  height: 50px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  background-color: white;
}
/* .head img{
    width: 20px;
    height:20px;
    margin-right: -21px;
    margin-top: 15px;
} */
.zzhead span {
  font-size: 20px;
  font-weight: 600;
  margin: 0 auto;
}
.zzbody1 {
  padding: 20px 10px;
}
.zzBankcard {
  width: 350px;
  height: 150px;
  background: linear-gradient(to left, rgb(0, 217, 255), yellowgreen);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px 10px 0px 10px;
}
.zzBankcardtop {
  display: flex;
}
.zzBankcardCard {
  line-height: 30px;
  color: aliceblue;
}
.zzAliasediting {
  margin-left: -10px;
  color: aliceblue;
  display: flex;
  align-items: center;
  height: 50px;
}
.zzBankcardpay {
  width: 100%;
  height: 30px;
  border-top: 1px solid white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
}
.zzBankcardpay a {
  text-decoration: none;
  color: white;
}
.zzaccountManagement {
  height: 120px;
  width: 370px;
  background-color: white;
  border-radius: 10px;
  margin: 20px 0px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}
.zzaccountManagement a {
  text-decoration: none;
  color: #666666;
  font-size: 17px;
  font-weight: bold;
}
.zztail {
  width: 370px;
  height: 185px;
  background-color: white;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
}
.zztail div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 3px solid #f0f0f0;
}
#zzback {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  z-index: 1;
  display: none;
}
#zzmodify {
  width: 370px;
  height: 200px;
  background-color: white;
  border-radius: 10px;
  margin-left: 10px;
  position: absolute;
  top: 400px;
  text-align: center;
  /* display: none; */
  z-index: 10;
}
#zzmodify p {
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
  padding-top: 10px;
}
#zzmodify input {
  width: 320px;
  height: 40px;
  border-radius: 10px;
  border: 3px solid #f0f0f0;
  outline: none;
  margin-top: 10px;
}
#zzcancel {
  /* width: 370px; */
  border-top: 2px solid #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  font-size: 17px;
  font-weight: 600;
  margin-top: 30px;
  text-align: center;
}
#zzcancleone {
  width: 185px;
  height: 50px;
  color: #292421;
  line-height: 50px;
  border-right: 2px solid #f0f0f0;
}
#zzcanceltwo {
  width: 185px;
  height: 50px;
  line-height: 50px;
  color: #ed9121;
}
.zzverificationCode {
  height: 170px;
  width: 390px;
  background-color: white;
  position: absolute;
  bottom: 0px;
  padding: 2px 5px;
  /* display: none; */
}
.zzverificationCodehead {
  display: flex;
  height: 20px;
  margin: 10px 10px;
  font-size: 19px;
  text-align: center;
  position: relative;
}
.zzverificationCodehead p {
  position: absolute;
  right: 140px;
}
.zzverificationCodecenter {
  height: 50px;
  border-top: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  display: flex;
  justify-content: space-evenly;
  line-height: 50px;
  font-size: 17px;
}
#zzsix1 {
  border: 0;
  outline: none;
  height: 40px;
  margin-top: 5px;
}
#zzgain {
  border-left: 1px solid #c0c0c0;
  padding-left: 10px;
  color: #f0c61a;
}
.zzverificationCodetop {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 80px;
}
#zzaffirm {
  height: 40px;
  width: 370px;
  background-color: #ed912152;
  border: 0;
  border-radius: 5px;
  color: white;
  font-size: 20px;
}
#zzphone {
  color: #808a87;
}
#zzlow {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  z-index: 22;
  display: none;
}
#zzcard1{
  display: flex;
}
#eye{
  margin-left: 50px;
}
/* 短信验证码 */
.verificationCode-center{
   height: 50px;
   width: 300px;
   border: #c0c0c0 1px solid;
   border-radius: 4px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   font-size: 14px;
    margin-left: 10px;
    margin-top: 10px;
}
.verificationCode-center p{
    margin-left: 9px;
}
#Y1six{
    border: 0;
    outline: none;
    height: 40px;
    width: 95px;
    text-align: right;
    margin-right: -30px;
}
#Y1gain{
    border-left:1px solid #c0c0c0;
    padding-left: 3px;
    color: #f0c61a;
}
.verificationCode-top{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 50px;
    font-size: 17px;
    margin-left: 16px;
}
#affirm{
    height: 40px;
    width: 370px;
    background-color: #ed912152;
    border: 0;
    border-radius: 5px;
    color: white;
    font-size: 20px;
}
#Y1phone{
    color: #808a87;
}
</style>